import { Button, Grid, TextField, Box, Typography, Drawer } from '@material-ui/core';
import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import FavoriteBorderOutlinedIcon from '@material-ui/icons/FavoriteBorderOutlined';
import FavoriteOutlinedIcon from '@material-ui/icons/FavoriteOutlined';
import ThumbUpAltOutlinedIcon from '@material-ui/icons/ThumbUpAltOutlined';
import ThumbDownAltOutlinedIcon from '@material-ui/icons/ThumbDownAltOutlined';
import ThumbUpIcon from '@material-ui/icons/ThumbUp';
import ThumbDownIcon from '@material-ui/icons/ThumbDown';


@inject("baseStore")
@observer
class ReplyButton extends Component {

    constructor(props) {
        super(props);
        this.state = {
            content: "",
            open: false,
            favorite: false,
            like: false,
            dislike: false
        }
    }

    write = () => {
        const { type, baseStore, belongId, repliedId, getEssayDetails } = this.props;
        const { content } = this.state;
        const res = baseStore.handleWriteComment(content, type, belongId, repliedId);
        console.log(res);
        setTimeout(() => {
            getEssayDetails();
        }, 1000)


    }

    contentChange = (e) => {
        this.setState({
            content: e.target.value
        })
    }

    render() {
        const { content, open, love, like, dislike } = this.state;
        const { xs, tips } = this.props;
        let space = 20;
        return (
            <Grid container>
                <Grid item xs={xs - 3}></Grid>
                <Grid item xs={3}>
                {
                        love == true ?
                            <span onClick={() => { this.setState({ love: false }) }}><FavoriteOutlinedIcon
                                style={{ marginRight: space, cursor: "pointer" }}
                                color='error' />
                            </span>
                            : <span onClick={() => { this.setState({ love: true }) }}><FavoriteBorderOutlinedIcon
                                style={{ marginRight: space, cursor: "pointer" }}
                                color='error' /></span>

                    }
                    {
                        like == true ?
                            <span onClick={() => { this.setState({ like: false }) }}><ThumbUpIcon
                                style={{ cursor: "pointer" }}
                                color='primary' /> {1} </span>
                            : <span onClick={() => {
                                this.setState({ like: true, dislike: false })
                            }}><ThumbUpAltOutlinedIcon
                                    style={{ cursor: "pointer" }}
                                    color='primary' /> {0} </span>
                    }
                    {
                        dislike === true ?
                            <span onClick={() => { this.setState({ dislike: false }) }}><ThumbDownIcon
                                style={{ marginLeft: space, cursor: "pointer" }}
                                color='action' /> {1} </span>
                            : <span onClick={() => { this.setState({ dislike: true, like: false }) }}><ThumbDownAltOutlinedIcon
                                style={{ marginLeft: space, cursor: "pointer" }}
                                color='action' /> {0} </span>
                    }
                </Grid>
                <Grid item xs={1}>
                    
                    <Button color="primary" onClick={() => { this.setState({ open: true }) }} >回复</Button>
                </Grid>
                <React.Fragment key={"bottom"}>
                    <Drawer anchor={"bottom"} open={open} onClose={() => { this.setState({ open: false }) }}>
                        <Box p={2}>
                            <Typography>{tips}</Typography>
                            <TextField
                                variant="outlined"
                                multiline
                                fullWidth
                                value={content}
                                rows={5}
                                onChange={this.contentChange}
                                placeholder={"请文明发言，友善交流"} />

                        </Box>
                        <Button color="secondary"
                            onClickCapture={() => {
                                this.setState({ content: "", open: false });
                            }}
                            onClick={this.write}>发送</Button>
                    </Drawer>
                </React.Fragment>

            </Grid>
        );
    }
}

export default ReplyButton;
